<template>
  <a-drawer
    title="发送短信"
    placement="right"
    :closable="true"
    width="800"
    :maskClosable='false'
    :keyboard='false'
    v-model:open="visible"
  >
    <a-form
      :model="formState"
      ref="formEle"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="短信模板"
        name="tempId"
        :rules="[{ required: true, message: '请选择短信模板' }]"
      >
        <a-select
          ref="select"
          v-model:value="formState.tempId"
          style="width: 120px"
        >
          <a-select-option
            v-for="item in smsLists"
            :key="item.id"
            :value="item.testmsg_id"
          >
            {{ item.text_name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="是否开启定时任务"
        name="isOpen"
      >
        <a-switch
          v-model:checked="formState.isOpen"
          checked-children="是"
          un-checked-children="否"
        />
      </a-form-item>
      <a-form-item
        label="发送时间"
        name="send_time"
        v-if="formState.isOpen"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-date-picker
          show-time
          v-model:value="formState.send_time"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item
        label="任务描述"
        name="describe"
        v-if="formState.isOpen"
        :rules="[{ required: true, message: '请输入任务描述' }]"
      >
        <a-input v-model:value="formState.describe" />
      </a-form-item>
      <a-form-item
        label="任务名称"
        name="task_name"
        v-if="formState.isOpen"
        :rules="[{ required: true, message: '请输入任务名称' }]"
      >
        <a-input v-model:value="formState.task_name" />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button
          type="primary"
          html-type="submit"
        >
          发送
        </a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup>
  import { message } from 'ant-design-vue'
  import { smsList, smsDel, smsTaskSend, activeUpdate } from '@/api/index'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  const emits = defineEmits(['sendOk', 'close'])
  const props = defineProps({})
  const formState = reactive({
    tempId: '',
    isOpen: false
  })
  const formEle = ref(null)
  const onFinish = (values) => {
    formEle.value.validate().then(() => {
      let temp = smsLists.value.find((val) => val.testmsg_id == formState.tempId)

      let params = {
        access_key_id: temp.access_key_id,
        secret_access_key: temp.secret_access_key,
        sign_name: temp.sign_name,

        template_code: temp.template_code,
        template_param: temp.template_param,
        phone: userPhones.value
      }
      if (formState.isOpen) {
        params.send_time = formState.send_time
        params.describe = formState.describe
        params.task_name = formState.task_name
      }

      smsTaskSend(params).then((res) => {
        if (res.errorCode) {
          message.success(res.msg)
          return
        }
        if (res.code == 200) {
          message.success('操作成功！')
          emits('sendOk')
          visible.value = false
        }
      }).catch((err) => {
          message.error(err.msg)
        })
    })
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  const smsLists = ref([])
  const getList = () => {
    smsList({
      page: 1,
      pageSize: 10000
    })
      .then((response) => {
        if (response.errorCode) {
          message.error(response.msg)
          return
        }
        smsLists.value = response.data
      })
      .catch((error) => {
        message.error(error.msg)
      })
  }


  const userPhones = ref(null)
  const visible = ref(false)
  const init = (type, row) => {
    getList()
    if (type == 0) {
      userPhones.value = row.phone
    } else {
      userPhones.value = row.map((val) => val.phone).join(',')
    }

    visible.value = true
  }
  defineExpose({
    init
  })
</script>
